<template>
  <div class="login-bg">
    <div class="login-box">
      <div class="left"></div>
      <div class="right">
        <div class="center">
          <img src="../../images/LOGO.png" alt="" />
          <h3>云掌柜</h3>
          <div class="login-input">
            <span class="iconfont icon-31wode"></span>
            <input
              class="userName"
              type="text"
              placeholder="请输入账号"
              v-model="user"
            />
          </div>
          <div class="login-input">
            <span class="iconfont icon-suoding_o"></span>
            <input
              class="userName"
              type="password"
              placeholder="请输入密码"
              v-model="pw"
              @keyup.enter="login"
            />
          </div>
          <div class="btn-for">
            <div class="auto-log">
              <input type="checkbox" />
              自动登录
            </div>
            <div class="forget">忘记密码</div>
          </div>

          <el-button class="submit" type="primary" @click="login"
            >立即登录</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import { useRouter } from "vue-router";
export default defineComponent({
  setup() {
    const user = ref("");
    const router = useRouter();
    const pw = ref("");
    const goto = () => {
      router.push("/home");
    };
    const login = () => {
      if (user.value == "") {
        alert("用户名不能为空");
      } else {
        if (user.value != "woshisb") {
          alert("用户名错误，请重新输入");
          pw.value = "";
          user.value = "";
        } else {
          if (pw.value === "") {
            alert("密码不能为空");
          } else {
            if (pw.value !== "123456") {
              alert("密码错误，请重新输入");
              pw.value = "";
              user.value = "";
            } else {
              alert("登录成功");
              goto();
            }
          }
        }
      }

      // if (user.value != "") {
      //   if (user.value == "woshipanghu") {
      //     if (pw.value != "") {
      //       if (pw.value == "123456") {
      //         alert("登陆成功");
      //         goto();
      //       } else {
      //         alert("密码错误，请重新登录");
      //       }
      //     } else {
      //       alert("密码不能为空");
      //     }
      //   }
      // } else {
      //   alert("用户名不能为空");
      // }
    };
    return {
      user,
      goto,
      pw,
      login,
      router,
    };
  },
});
</script>

<style lang="less" scoped>
.login-bg {
  height: 100%;
  background: url(../../images/登录\ 5.png) no-repeat;
  background-size: 100%;
  position: relative;

  .login-box {
    position: absolute;
    height: 546px;
    width: 838px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background: #fff;
    border-radius: 30px;
    overflow: hidden;
    display: flex;

    .left {
      width: 50%;
      height: 100%;
      background: pink;
      background: url(../../images/蒙版分组.png) no-repeat;
      background-size: 100%;
    }

    .right {
      width: 50%;
      height: 100%;
      // background: lightgreen;

      img {
        width: 107px;
        height: 107px;
      }
      .center {
        width: 100%;
        height: 100%;
        text-align: center;
        padding-top: 50px;

        .btn-for {
          width: 260px;
          height: 40px;
          margin: 0 auto;
          position: relative;

          .auto-log {
            position: absolute;
            left: 0%;
            top: 40%;
            width: 100px;
            height: 25px;
            line-height: 25px;
            position: relative;

            input {
              position: absolute;
              top: 25%;
              left: 0;
            }
          }
          .forget {
            width: 48px;
            height: 22px;
            line-height: 22px;
            position: absolute;
            right: 0;
            top: 40%;
            color: #0061ff;
            cursor: pointer;
          }
        }
        .submit {
          width: 260px;
          margin-top: 25px;
          height: 40px;
          background: #316dfb;
          color: #fff;
        }

        h3 {
          font-size: 26px;
          margin: 15px 0 25px 0;
          color: #004dff;
        }

        .login-input {
          position: relative;
          margin-top: 20px;

          .userName {
            appearance: none;
            width: 260px;
            height: 40px;
            background: #e2ebff;
            outline: none;
            border: 0;
            border-radius: 5px;
            font-size: 16px;
            text-indent: 32px;
          }
          input::placeholder {
            color: #4f84ff;
          }

          .iconfont {
            position: absolute;
            top: 24%;
            font-size: 20px;
            color: #4f84ff;
            left: 20%;
          }
        }
      }
    }
  }
}
</style>
